extends layout.pug

block pagevar
    - var pagename="首页"

block content
    if user.isLoggedIn
        .container(style="margin-top:30px;")
            .row
                .col-xl-12
                    #browser-warning.jumbotron
                        p.lead 😥你似乎正在使用GHAuth不支持的浏览器
                        p.browser-warning-label 这可能导致您的浏览体验变差，请使用Firefox、Chrome或其他类似的现代浏览器。
                .col-xl-4
                    .jumbotron
                        if config.showAnnouncement
                            p.lead 欢迎来到 #{config.sitename}
                            div.announcement
                                include:markdown-it ../config/announcement.md
                        else
                            p.lead(style="margin-bottom:0;") 欢迎来到 #{config.sitename}

                    .jumbotron
                        span.lead 游戏昵称：#{user.playername}
                        br
                        span.lead 注册邮箱：#{user.email}
                        br
                        span.lead 注册时间：#{dateFormatter.format(user.time.register)}
                        //- form
                        //-     .input-group.mb-3(style="margin-top:20px;")
                        //-         input#new-playername.form-control(type="text" name="playername" placeholder="新的昵称" autocomplete="off")
                        //-         .input-group-append
                        //-             button.btn.btn-primary(type="button" disabled) 提交
                        //- small.form-text.text-muted 某些情况下修改昵称可能导致玩家数据丢失，修改前请咨询服务器管理员以了解详细情况。
                    .jumbotron
                        p.lead 修改密码
                        small.text-muted 修改密码后你可能需要重新登录你的游戏
                        form
                            input(autocomplete='username' style="display: none;")
                            .form-group(style="margin-top:20px;")
                                input#old-password.form-control(type="password" placeholder="旧密码" autocomplete="off")
                            .form-group(style="margin-top:20px;")
                                input#new-password.form-control(type="password" placeholder="新密码" autocomplete="new-password")
                            .form-group(style="margin-top:20px;")
                                input#repeat-new-password.form-control(type="password" placeholder="重复新密码" autocomplete="new-password")
                        button.btn.btn-changepassword.btn-primary.btn-block(type="button") 修改密码

                .col-xl-8
                    .jumbotron.d-none.d-lg-block
                        p.lead 快速配置启动器
                        p(style="font-weight: 100;") Yggdrasil API 认证地址：#[mark #{config.url}/api/yggdrasil]
                        p(style="font-weight: 100;") 点击下方按钮复制 API 地址，或者将按钮拖动至启动器的任意界面即可快速添加认证服务器。
                        button.btn.btn-primary.btn-dnd-button(type="button" style="cursor: move;" draggable="true" data-clipboard-text=config.url+"/api/yggdrasil") 将此按钮拖至启动器
                    .jumbotron
                        p.lead 游戏皮肤预览 #[svg#skin-refresh(viewbox="0 0 24 24" width="19" height="19" stroke-width="1" fill="none" stroke-linecap="round" stroke-linejoin="round") #[polyline(points="1 4 1 10 7 10")] #[polyline(points="23 20 23 14 17 14")] #[path(d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15")]]
                        div.viewer-control-container
                            input#skinData(type="text" autocomplete="off" style="display:none;" data-type="0")
                            .custom-control.custom-radio.custom-control-inline
                                input#viewer3DModelRadio.custom-control-input.viewer-radio(type="radio" name="viewerRadio" checked)
                                label.custom-control-label(for="viewer3DModelRadio") 模型
                            .custom-control.custom-radio.custom-control-inline
                                input#viewerRawImage.custom-control-input.viewer-radio(type="radio" name="viewerRadio")
                                label.custom-control-label(for="viewerRawImage") 原始图片
                            .custom-control.custom-radio.custom-control-inline
                                input#viewerRenderGraph.custom-control-input.viewer-radio(type="radio" name="viewerRadio")
                                label.custom-control-label(for="viewerRenderGraph") 渲染图
                        .viewer-group
                            div.placeholder.viewer-container(style="opacity: 1;")
                            div.skinviewer-main-container.viewer-container.active
                                div.skinviewer-container
                                    canvas.skinviewer-canvas
                                div(style="display: flex;justify-content: center;")
                                    .custom-control.custom-radio.custom-control-inline
                                        input#skinviewerWalkRadio.custom-control-input(type="radio" name="skinviewerActionRadio" checked)
                                        label.custom-control-label(for="skinviewerWalkRadio") 走
                                    .custom-control.custom-radio.custom-control-inline
                                        input#skinviewerRunRadio.custom-control-input(type="radio" name="skinviewerActionRadio")
                                        label.custom-control-label(for="skinviewerRunRadio") 跑
                                    .custom-control.custom-checkbox.custom-control-inline
                                        input#skinviewerRotateCheckbox.custom-control-input(type="checkbox" checked)
                                        label.custom-control-label(for="skinviewerRotateCheckbox") 旋转
                                    .custom-control.custom-checkbox.custom-control-inline
                                        input#skinviewerPauseCheckbox.custom-control-input(type="checkbox")
                                        label.custom-control-label(for="skinviewerPauseCheckbox") 暂停
                                #skinviewer-loading.viewer-loading.active
                                    .spinner-border.text-light(role="status")
                                        span.sr-only Loading...
                                    strong.text-light Loading...
                            div.rawimage-main-container.viewer-container
                                img#raw-image
                                #rawimage-loading.viewer-loading.active
                                    .spinner-border.text-light(role="status")
                                        span.sr-only Loading...
                                    strong.text-light Loading...
                            div.rendergraph-main-container.viewer-container(data-copyright="")
                                div.rendergraph-canvas-container
                                    canvas(width="1920px" height="1080px")#rendergraph-image
                                #rendergraph-loading.viewer-loading.active
                                    .spinner-border.text-light(role="status")
                                        span.sr-only Loading...
                                    strong.text-light Loading...
                                div.rendergraph-holder
                                div.rendergraph-control-container.pagination
                                    a#rendergraphPreviousButton.previous_page.disabled 上一张
                                    a#rendergraphNextButton.next_page 下一张

                    .jumbotron
                        p.lead 游戏皮肤上传
                        small#emailHelp.form-text.text-muted 请勿上传违规内容(包括但不限于含有政治，色情，赌博信息)的皮肤图片，一经发现将直接封禁。<br />
                        .uploadskin-model-radio-container
                            span.uploadskin-model-radio-label 皮肤模型：
                            .custom-control.custom-radio.custom-control-inline
                                input#steveTypeRadio.custom-control-input.viewer-radio(type="radio" name="skinUploadTypeRadio" value="0" checked)
                                label.custom-control-label(for="steveTypeRadio") 默认
                            .custom-control.custom-radio.custom-control-inline
                                input#alexTypeRadio.custom-control-input.viewer-radio(type="radio" name="skinUploadTypeRadio" value="1")
                                label.custom-control-label(for="alexTypeRadio") 纤细
                        .input-group.mb-3(style="margin-top:10px;")
                            .custom-file
                                input#skinFileInput.custom-file-input(type="file" accept="image/png")
                                label.custom-file-label(for="skinFileInput" data-browse="选择") 皮肤
                            .input-group-append
                                button#viewSelectedSkin.btn.btn-primary(type="button") 查看效果
                        button.btn.btn-uploadskin.btn-primary.btn-block(type="button") 提交

                    if user.isLoggedIn
                        if user.isAdmin
                            include widget/admin.pug




    else
        main(style="display: flex;align-items: center;flex-direction: column;justify-content: center;")
            h1.display-4(style="margin-top:30px;") 🚀
            h1.display-4 #{config.sitename}
            h1.lead #{config.description}

append scripts
    if user.isLoggedIn
        script(src="/js/bs-custom-file-input.min.js" aysnc)
        script(src="/js/skinview3d.bundle.js" aysnc)
        script(src="/js/main_loggedin.js" aysnc)
        script(src="/js/crypto-js.js" aysnc)
        script(src="/js/changepassword.js" aysnc)
        script(src="/js/skinviewer_control.js" aysnc)
        script(src="/js/rawimage_control.js" aysnc)
        script(src="/js/rendergraph_control.js" aysnc)
        script(src="/js/uploadskin.js" aysnc)